<template>
  <div class="app-container">
    <div class="top-show">
      <el-form :model="queryParams"
        ref="queryForm"
        :inline="true"
        v-show="showSearch"
        label-width="100px">
        <el-row>
          <el-form-item label="订单号"
            prop="orderNo">
            <el-input v-model="queryParams.orderNo"
              placeholder="请输入订单号"
              clearable
              size="small" />
          </el-form-item>
          <el-form-item label="订单标题"
            prop="orderTitle">
            <el-input v-model="queryParams.orderTitle"
              placeholder="请输入订单标题"
              clearable
              size="small" />
          </el-form-item>
          <el-form-item label="下单时间"
            prop="createTimeArray">
            <el-date-picker v-model="queryParams.createTimeArray"
              size="small"
              type="daterange"
              align="right"
              clearable
              style="width: 232px"
              value-format="yyyy-MM-dd"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="客户推荐码"
            prop="supplierName">
            <el-input v-model="queryParams.supplierName"
              placeholder="请输入客户推荐码"
              clearable
              size="small" />
          </el-form-item>
        </el-row>

        <el-row>

          <el-form-item label="客户名称"
            prop="customerName">
            <el-input v-model="queryParams.customerName"
              placeholder="请输入客户名称"
              clearable
              size="small" />
          </el-form-item>
          <el-form-item label="论文标题"
            prop="proName">
            <el-input v-model="queryParams.proName"
              placeholder="请输入论文标题"
              clearable
              size="small"/>
          </el-form-item>
          <el-form-item label="订单来源"
            prop="platSource">
            <el-select v-model="queryParams.platSource"
              placeholder="请选择订单来源"
              clearable
              size="small">
              <el-option v-for="dict in platSourceOptions"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue" />
            </el-select>
          </el-form-item>

          <el-form-item style="margin-left: 10px">
            <el-button type="primary"
              icon="el-icon-search"
              size="mini"
              @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh"
              size="mini"
              @click="resetQuery">重置</el-button>

          </el-form-item>

        </el-row>

      </el-form>

    </div>

    <el-row class="row-mb2"
      style="margin-left: 0px; margin-right: 0px;">
      <el-col :span="10">
        <el-button type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport">导出</el-button>
          <el-button type="primary" plain icon="el-icon-plus" size="small" @click="addOrder()">新增
          </el-button>
      </el-col>

      <right-toolbar :showSearch.sync="showSearch"
        @queryTable="getList"></right-toolbar>
    </el-row>

    <div class="divTable">
      <div style="width:100%;height:40px;line-height: 40px;padding: 0 11px;margin-bottom: 10px">
        <span style="width:40%;display: inline-block;text-align: center;font-size:14px;font-weight: bold;color:#606266;line-height: 20px;">订单详情</span>
        <span style="width:7.5%;display: inline-block;text-align: center;font-size:14px;font-weight: bold;color:#606266;line-height: 20px;">现金</span>
        <span style="width:7.5%;display: inline-block;text-align: center;font-size:14px;font-weight: bold;color:#606266;line-height: 20px;">积分</span>
        <span style="width:7.5%;display: inline-block;text-align: center;font-size:14px;font-weight: bold;color:#606266;line-height: 20px;">订单总额</span>
        <span style="width:7.5%;display: inline-block;text-align: center;font-size:14px;font-weight: bold;color:#606266;line-height: 20px;">订单类型</span>
        <span style="width:7.5%;display: inline-block;text-align: center;font-size:14px;font-weight: bold;color:#606266;line-height: 20px;">客户名称</span>
        <span style="width:7.5%;display: inline-block;text-align: center;font-size:14px;font-weight: bold;color:#606266;line-height: 20px;">客户手机</span>
        <span style="width:7.5%;display: inline-block;text-align: center;font-size:14px;font-weight: bold;color:#606266;line-height: 20px;">订单来源</span>
        <span style="width:7.5%;display: inline-block;text-align: center;font-size:14px;font-weight: bold;color:#606266;line-height: 20px;">操作</span>
      </div>
      <div v-for="(item, idx) in infoList"
        :key="idx"
        style="margin-bottom:15px;border: 1px solid #E6E6E6;color:#666;">
        <div class="top_order_box">
          <div class="top_order_info">
            <span>订单编号：{{ item.orderNo }}</span>
            <span style="margin-left:30px;">订单标题：{{ item.orderTitle }}</span>
            <span style="margin-left:30px;">下单时间：{{ item.createTime }}</span>
          </div>
          <div class="top_order_info">

          </div>
        </div>
        <div class="item_card_box">
          <div style="width:40%;">
            <div v-for="(i, idx) in item.itemList"
              :key="idx"
              class="item_pro_box">
              <div class="item_pro_info_txt">
                <div style="width:100%;max-width: 640px;">{{ i.proName }}</div>
                <div style="line-height: 15px;margin-top: 10px;color: #999">
                  <span style="margin-right:30px;">现金：￥{{ i.payAmountStr }}</span>
                  <span style="margin-right:30px;">下载积分：{{ i.payByScore }}</span>
                  <span style="margin-right:30px;">买断积分：{{ i.costPrice }}</span>
                  <span>付款时间：{{ i.payDate }}</span>
                </div>
              </div>
            </div>
          </div>
          <div style="width:7.5%;font-weight: bold;color: #f73131;"
            class="item_txt_style">
            ￥{{ item.payAmountStr }}
          </div>
          <div style="width:7.5%;font-weight: bold;color: #f73131;"
            class="item_txt_style">
            {{ item.payByScore }}
          </div>
          <div style="width:7.5%;font-weight: bold;color: #f73131;"
            class="item_txt_style">
            ￥{{ item.orderAmountStr }}
          </div>
          <div style="width:7.5%;"
            class="item_txt_style">
            {{ item.orderTypeName || item.orderType }}
          </div>
          <div style="width:7.5%;"
            class="item_txt_style">
            {{ item.customerName }}
          </div>
          <div style="width:7.5%;"
            class="item_txt_style">
            {{ item.phone }}
          </div>
          <div style="width:7.5%;"
            class="item_txt_style">
            {{ item.platSourceName }}
          </div>
          <div class="item_txt_style" style="width:7.5%;">
            <el-button size="mini"
              type="text"
              icon="el-icon-zoom-in"
              @click="handleShowDetail(item)"
              v-hasPermi="['order:info:query']">查看订单</el-button>
            <el-button size="mini"
              type="text"
              icon="el-icon-check"
              @click="addPayUI(item)"
              v-if="item.platSource == 'manager'">收款</el-button>
          </div>
        </div>
      </div>

      <pagination v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList" />
    </div>

    <el-dialog title="添加订单"
      :visible.sync="dialogVisible"
      width="35%">
      <el-form ref="invoice"
        :model="invoice"
        :rules="rulesTwo"
        label-width="100px">
        <el-form-item label="订单类型"
          prop="orderType">
          <el-select v-model="invoice.orderType"
            placeholder="请选择订单类型"
            clearable
            size="small">
            <el-option v-for="dict in orderTypeOptions"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue" />
          </el-select>
        </el-form-item>
        <el-form-item label="订单标题"
          prop="orderTitle">
          <el-input v-model="invoice.orderTitle"
            placeholder="请输入订单标题" />
        </el-form-item>
        <el-form-item label="订单金额"
          prop="amount">
          <el-input v-model="invoice.amount" @input="invoice.amount=invoice.amount.replace(/^0+(?=\d)|[^\d.]+/g, '')" maxlength="8" min="0"
            placeholder="请输入订单金额" />
        </el-form-item>
        <el-form-item label="积分支付"
          prop="payByScore">
          <el-input v-model="invoice.payByScore"  @input="invoice.payByScore=invoice.payByScore.replace(/^0+(?=\d)|[^\d]+/g, '')" maxlength="6" min="0"
            placeholder="请输入积分支付数额" />
        </el-form-item>
        <el-form-item label="客户名称"
          prop="customerName">
          <el-input v-model="invoice.customerName"
            placeholder="请输入客户名称" />
        </el-form-item>
        <el-form-item label="客户手机"
          prop="phone">
          <el-input v-model="invoice.phone"
            placeholder="请输入客户手机" />
        </el-form-item>
      </el-form>
      <span slot="footer"
        class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary"
          @click="addInvoices()">提 交</el-button>
      </span>
    </el-dialog>

    <el-dialog title="添加收款"
      :visible.sync="payVisible"
      width="35%">
      <el-form ref="invoice"
        :model="payinfo"
        :rules="rulesPay"
        label-width="100px">

        <el-form-item label="收款事项"
          prop="proName">
          <el-input v-model="payinfo.proName"
            placeholder="请输入收款事项" />
        </el-form-item>
        <el-form-item label="收款金额"
          prop="amount">
          <el-input v-model="payinfo.amount" @input="payinfo.amount=payinfo.amount.replace(/^0+(?=\d)|[^\d.]+/g, '')" maxlength="8" min="0"
            placeholder="请输入收款金额" />
        </el-form-item>
      </el-form>
      <span slot="footer"
        class="dialog-footer">
        <el-button @click="payVisible = false">取 消</el-button>
        <el-button type="primary"
          @click="submitPayInfo()">提 交</el-button>
      </span>
    </el-dialog>

    <el-dialog title="收款码" :visible.sync="weixinVisible" width="35%" :destroy-on-close="true">
      <div style="width: 100%;display: flex;  justify-content: center;   align-items: center; ">

        <div id="qrcode" ref="qrcode" style="width: 150px;height: 150px;"></div>

      </div>
      <span slot="footer"
        class="dialog-footer">
        <el-button @click="weixinVisible = false">关闭</el-button>
      </span>
    </el-dialog>




  </div>
</template>

<script>
import QRCode from "qrcodejs2";
import {
  listInfo,
  getInfo,
  delInfo,
  addInfo,
  updateInfo,
  addInvoice,
  orderInfoTotal,
  addSubPayinfo,
} from "@/api/order/info";
import {
  storeGroup
} from "@/api/order/recharge";
import {
  selectGroup
} from "@/api/platform/store"
import imageArraySize from "@/components/ImageUpload/imageArraySize";

export default {
  name: "orderInfo",
  components: {
    imageArraySize
  },
  data () {
    return {
      storeInFoOptions: [],
      saveStoreInFoOptions: '',
      storeGroupList: [],
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      subFlag: true,
      dialogVisible: false,
      payVisible: false,
      weixinVisible:false,
      // 默认数字
      activeClass: 0,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 订单子表格数据
      infoList: [],
      // 弹出层标题
      title: "",
      //查看详细标题
      viewTitle: "",
      // 是否显示弹出层
      open: false,
      //是否显示查看详细弹出层
      viewOpen: false,
      // 订单类型字典
      orderTypeOptions: [],
      // 订单状态字典
      orderStatusOptions: [],
      // 支付状态字典
      payStatusOptions: [],
      // 支付方式字典
      payMethodOptions: [],
      // 订单来源字典
      platSourceOptions: [],
      // 开票状态字典
      invoiceStatusOptions: [],
      // 配送方式字典
      deliverMethodOptions: [],
      // 发货状态字典
      sendStatusOptions: [],
      // 包裹状态字典
      orderPackStatusOptions: [],
      // 评价状态字典
      commentStatusOptions: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        supplierName: null,
        orderType: null,
        orderNo: null,
        parentOrderNo: null,
        customerName: null,
        phone: null,
        orderStatus: null,
        payStatus: null,
        payMethod: null,
        platSource: null,
        payTime: null,
        createTime: null,
        cancelTime: null,
        buyMes: null,
        expireDate: null,
        remark: null,
        invoiceStatus: null,
        deliverMethod: null,
        sendTime: null,
        sendStatus: null,
        orderPackStatus: null,
        signTime: null,
        receiveTime: null,
        commentStatus: null,
        commentTime: null,
        payTimeArray: [],
        sendTimeArray: [],
        signTimeArray: [],
        receiveTimeArray: [],
        commentTimeArray: [],
        createTimeArray: [],
        storeIds: [],
        proName: null,
        storeGroupId: null
      },
      payMethods: [],
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        orderNo: [{
          required: true,
          message: "订单号不能为空",
          trigger: "blur"
        }],
        parentOrderNo: [{
          required: true,
          message: "支付订单号不能为空",
          trigger: "blur"
        }],
      },
      rulesPay:{
        proName: [{
          required: true,
          message: "请输入收款事项",
          trigger: "blur"
        }],
        amount: [{
          required: true,
          message: "请输入收款金额",
          trigger: "blur"
        }],
      },
      rulesTwo: {
        orderType: [{
          required: true,
          message: "请选择订单类型",
          trigger: "blur"
        }],
        orderTitle: [{
          required: true,
          message: "请输入订单标题",
          trigger: "blur"
        }],
        amount: [{
          required: true,
          message: "请输入支付金额",
          trigger: "blur"
        }],
        payByScore: [{
          required: true,
          message: "请输入支付积分",
          trigger: "blur"
        }],
        customerName: [{
          required: true,
          message: "请输入客户名称",
          trigger: "blur"
        }],
        phone: [{
          required: true,
          message: "请输入客户手机",
          trigger: "blur"
        }],
      },
      orderVo: {},
      //发票参数
      invoice: {},
      payinfo: {},
      orderTotalData: 0
    };
  },
  watch: {
    ['queryParams.storeGroupId'] (val) {
      this.queryParams.storeIds = []
      if (val) {
        let storeArr = [], storeList = JSON.parse(this.saveStoreInFoOptions)
        this.storeGroupList.forEach(item => {
          if (item.groupId == val && item.storeIds) {
            storeArr = item.storeIds.split(',')
          }
        })

        let list = []
        storeList.forEach(item => {
          let sId = item.storeUid + ""
          if (storeArr.indexOf(sId) > -1) {
            list.push(item)
          }
        })
        this.storeInFoOptions = list
      } else {
        this.storeInFoOptions = JSON.parse(this.saveStoreInFoOptions)
      }

    }
  },
  created () {
    if (this.$route.query.activeClass) {
      this.queryParams.payStatus = "0";
      this.queryParams.orderStatus = "1";
      this.queryParams.sendStatus = null;
      this.activeClass = this.$route.query.activeClass
    }
    // 默认时间
    let date1 = new Date();
    let date2 = new Date(date1);
    date2.setDate(date1.getDate() - 7);
    let time1 = date1.getFullYear() + "-" + (date1.getMonth() + 1) + "-" + date1.getDate();
    let time2 = date2.getFullYear() + "-" + (date2.getMonth() + 1) + "-" + date2.getDate();
    this.queryParams.createTimeArray.push(time2);
    this.queryParams.createTimeArray.push(time1);
    // this.setrowspans();
    this.getList();



    this.getDicts("order_plat_source").then(response => {
      this.platSourceOptions = response.data;
    });
    this.getDicts("order_order_type").then(response => {
      this.orderTypeOptions = response.data;
    });
    /*
    this.getDicts("order_pay_status").then(response => {
      this.payStatusOptions = response.data;
    });
    this.getDicts("order_pay_method").then(response => {
      this.payMethodOptions = response.data;
    });
    selectGroup().then(response => {
      this.storeInFoOptions = response.data || [];
      this.saveStoreInFoOptions = JSON.stringify(response.data || [])
    });
    storeGroup().then(response => {
      this.storeGroupList = response.data || [];
    });

    this.getDicts("order_order_status").then(response => {
      this.orderStatusOptions = response.data;
    });
    this.getDicts("order_invoice_status").then(response => {
      this.invoiceStatusOptions = response.data;
    });
    this.getDicts("order_deliver_method").then(response => {
      this.deliverMethodOptions = response.data;
    });
    this.getDicts("order_send_status").then(response => {
      this.sendStatusOptions = response.data;
    });
    this.getDicts("order_pack_status").then(response => {
      this.orderPackStatusOptions = response.data;
    });
    this.getDicts("order_comment_status").then(response => {
      this.commentStatusOptions = response.data;
    });
    this.getOrderInfoTotal()
    */


  },

  methods: {

    qrcode(wxUrl) {
      console.log(wxUrl);
      let qrcode = new QRCode("qrcode", {
        width: 150, // 设置宽度，单位像素
        height: 150, // 设置高度，单位像素
        text: wxUrl, // 设置二维码内容或跳转地址
      });
    },
    getOrderInfoTotal () {
      orderInfoTotal(this.queryParams).then((res) => {
        this.orderTotalData = res.msg
      })
    },
    toJumpCustomer (uid) {
      this.$router.push("/customer/detail/" + uid);
    },
    /** 点击按钮进行刷新 */
    handleQueryStatus (index) {
      this.activeClass = index;
      if (index == 0) {
        this.queryParams.payStatus = null;
        this.queryParams.orderStatus = "1";
        this.queryParams.sendStatus = null;
      } else if (index == 1) { //待付款
        this.queryParams.payStatus = "0";
        this.queryParams.orderStatus = "1";
        this.queryParams.sendStatus = null;
      } else if (index == 2) { //待发货
        this.queryParams.payStatus = "1";
        this.queryParams.orderStatus = "1";
        this.queryParams.sendStatus = "0";
      } else if (index == 3) { //已发货
        this.queryParams.payStatus = "1";
        this.queryParams.orderStatus = "1";
        this.queryParams.sendStatus = "1";
      } else if (index == 4) { //已完成
        this.queryParams.payStatus = "1";
        this.queryParams.orderStatus = "1";
        this.queryParams.sendStatus = "2";
      } else { //已关闭
        // this.queryParams.payStatus = null;
        // this.queryParams.orderStatus = "0,-1,-2";
        // this.queryParams.sendStatus = null;
      }
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 查询订单子列表 */
    getList () {
      this.infoList = null;
      this.loading = true;
      this.queryParams.orderStatus = "1";
      listInfo(this.queryParams).then(response => {
        this.infoList = response.rows;
        //console.log(this.infoList);
        this.total = response.total;
        this.loading = false;
      });
    },
    // 订单类型字典翻译
    orderTypeFormat (row, column) {
      return this.selectDictLabel(this.orderTypeOptions, row.orderType);
    },
    // 订单状态字典翻译
    orderStatusFormat (row, column) {
      return this.selectDictLabel(this.orderStatusOptions, row.orderStatus);
    },
    // 支付状态字典翻译
    payStatusFormat (row, column) {
      return this.selectDictLabel(this.payStatusOptions, row.payStatus);
    },
    // 支付方式字典翻译
    payMethodFormat (row, column) {
      return this.selectDictLabel(this.payMethodOptions, row.payMethod);
    },
    // 订单来源字典翻译
    platSourceFormat (row, column) {
      return this.selectDictLabel(this.platSourceOptions, row.platSource);
    },
    // 开票状态字典翻译
    invoiceStatusFormat (row, column) {
      return this.selectDictLabel(this.invoiceStatusOptions, row.invoiceStatus);
    },
    // 配送方式字典翻译
    deliverMethodFormat (row, column) {
      return this.selectDictLabel(this.deliverMethodOptions, row.deliverMethod);
    },
    // 发货状态字典翻译
    sendStatusFormat (row, column) {
      return this.selectDictLabel(this.sendStatusOptions, row.sendStatus);
    },
    // 包裹状态字典翻译
    orderPackStatusFormat (row, column) {
      return this.selectDictLabel(this.orderPackStatusOptions, row.orderPackStatus);
    },
    // 评价状态字典翻译
    commentStatusFormat (row, column) {
      return this.selectDictLabel(this.commentStatusOptions, row.commentStatus);
    },
    // 取消按钮
    cancel () {
      this.open = false;
      this.reset();
    },
    handleShowMoney (row) {
      this.$router.push({
        path: '/store/workbench/orderDetail',
        query: {
          detailId: row.orderUid
        }
      })

    },

    // 表单重置
    reset () {
      this.form = {
        orderUid: null,
        platformUid: null,
        supplierUid: null,
        supplierName: null,
        orderType: null,
        orderNo: null,
        parentOrderNo: null,
        customerUid: null,
        customerName: null,
        phone: null,
        orderStatus: null,
        payStatus: null,
        payMethod: null,
        platSource: null,
        orderAmount: null,
        payAmount: null,
        discountRate: null,
        discountAmount: null,
        useCouponUid: null,
        useCouponAmount: null,
        payByBalance: null,
        currencyUnit: null,
        payTime: null,
        createTime: null,
        cancelTime: null,
        buyMes: null,
        expireDate: null,
        remark: null,
        ip: null,
        invoiceUid: null,
        invoiceStatus: null,
        deliverMethod: null,
        sendTime: null,
        sendStatus: null,
        orderPackStatus: null,
        signTime: null,
        receiveTime: null,
        autoReceiveTime: null,
        commentStatus: null,
        commentTime: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery () {
      if (this.payMethods.length > 0) {
        this.queryParams.payMethod = this.payMethods.join(',')
      } else {
        this.queryParams.payMethod = null
      }

      this.queryParams.pageNum = 1;
      this.getList();
      //this.getOrderInfoTotal()
    },
    /** 重置按钮操作 */
    resetQuery () {
      this.payMethods = []
      this.resetForm("queryForm");
      this.activeClass = 0;
      this.queryParams.payTimeArray = null;
      this.queryParams.createTimeArray = null;
      this.queryParams.sendTimeArray = null;
      this.queryParams.signTimeArray = null;
      this.queryParams.receiveTimeArray = null;
      this.queryParams.commentTimeArray = null;
      this.queryParams.storeIds = [];
      this.queryParams.storeGroupId = null;
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange (selection) {
      this.ids = selection.map(item => item.orderUid)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd () {
      this.reset();
      this.open = true;
      this.title = "添加订单";
    },

    addPayUI (row) {
      this.payinfo = {};
      this.payinfo.orderUid = row.orderUid;
      this.payVisible = true
    },

    addOrder() {
      this.invoice = {};
      this.dialogVisible = true
    },
    /** 开票 */
    addInvoices () {
      //if (this.subFlag) {

        addInvoice(this.invoice).then(response => {
          this.getList()
          this.dialogVisible = false
        });
        //this.subFlag = false;
      //}
    },

    submitPayInfo() {
      //if (this.subFlag) {
        addSubPayinfo(this.payinfo).then(response => {
          this.getList()
          this.payVisible = false
          this.weixinVisible = true;
          setTimeout(() => {
            this.qrcode(response.data.code_url);
          }, 3000);

        });
        //this.subFlag = false;
      //}
    },
    /** 查看详情按钮操作 **/
    handleShowDetail (row) {
      const orderUid = row.orderUid;
      this.$router.push("/order/detail/" + orderUid);
      // getInfo(orderUid).then(response => {
      //   this.orderVo = response.data;
      //   this.viewOpen = true;
      //   this.viewTitle = "订单详情";
      // });

    },
    handCloseDetail () {
      this.viewOpen = false
    },
    /** 修改按钮操作 */
    handleUpdate (row) {
      this.reset();
      const orderUid = row.orderUid || this.ids
      getInfo(orderUid).then(response => {
        console.log(response.data)
        this.form = response.data;
        this.open = true;
        this.title = "修改订单";
      });
    },
    /** 提交按钮 */
    submitForm () {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.orderUid != null) {
            updateInfo(this.form).then(response => {
              this.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addInfo(this.form).then(response => {
              this.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete (row) {
      const orderUids = row.orderUid || this.ids;
      this.$confirm('是否确认删除订单编号为"' + orderUids + '"的数据项?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function () {
        return delInfo(orderUids);
      }).then(() => {
        this.getList();
        this.msgSuccess("删除成功");
      })
    },
    /** 导出按钮操作 */
    handleExport () {
      this.download('prod-api/order/info/export', {
        ...this.queryParams
      }, `订单信息表.xlsx`)
    }
  }
};
</script>

<style scoped lang="scss">
.top-show {
  display: flex;
  background-color: #fff;
  border-radius: 6px;
  padding: 10px 10px 0;
  .show-data {
    flex: 1;
    margin-left: 30px;
    margin-top: 10px;
    border: 1px solid #eee;
    height: 200px;
    max-width: 400px;
    .item-data {
      height: 100px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 0 30px;
      &:not(:last-child) {
        border-bottom: 1px solid #eee;
      }
      .item-data-show {
        font-size: 30px;
        color: #333;
        line-height: 1;
        margin-bottom: 10px;
      }
      .item-data-desc {
        font-size: 14px;
        color: #999;
      }
    }
  }
}
.top_order_box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 40px;
  background: #f7f8fa;
  padding: 1px 10px;
  line-height: 40px;
  position: relative;

  .top_order_info {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #333;
  }
}

.item_card_box {
  padding: 10px;
  width: 100%;
  height: auto;
  font-size: 14px;
  display: flex;
  align-content: center;
}

.item_pro_box {
  height: 50px;

  &:not(:last-child) {
    margin-bottom: 10px;
  }

  .item_pro_info {
    display: flex;
    align-items: center;

    .item_pro_info_txt {
      padding: 5px 0;
      flex: 1;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-height: 80px;
    }
  }
}

.item_txt_style {
  display: flex;
  align-items: center;
  justify-content: center;
}

.divTable {
  width: 100%;
  padding: 10px;
  background: #fff;
  width: 100%;
  height: 100%;
  border-radius: 6px;
}

.el-table {
  /* border-radius: 6px; */
  width: 100%;
  background-color: #fff;
  /* padding: 10px; */
}

.spanTxt {
  margin-left: 40px;
  display: inline-block;
  line-height: 42px;
}

.dataDiv {
  margin-bottom: 5px;
}

.dataDiv:last-child {
  margin-bottom: 0px;
}

.pagination-container {
}

.app-container {
  background-color: #f7f8fa;
  padding: 20px;
}

.el-form {
  background-color: #fff;
  padding-top: 10px;
  border-radius: 6px;
}

.row-mb2 {
  border-radius: 6px;
  width: 100%;
  background-color: #fff;
  padding: 10px;
  margin: 10px 0;
}

.el-form-item {
  margin-bottom: 10px;
}

.button-sku-blue {
  color: #409eff;
  background: #ecf5ff;
  border-color: #b3d8ff;
}

#selectTable >>> .el-table__expanded-cell {
  padding: 1px;
  background: #f7f8fa;
  font-size: 12px;
}

#selectTable >>> .el-table__empty-block {
  display: none;
}

#selectTable >>> .el-table--medium td {
  padding: 0px;
}
</style>
